$.get('../static/data/北京市.json').then(geoJson => {
    $.get('http://127.0.0.1:5000/geo').then(res => {
        echarts.registerMap('beijing', geoJson)
        const myChart = echarts.init(document.getElementById('geo'))
        const options = {
            title: {
                text: '北京景点分布地图',
                left: 'center',
                textStyle: {
                    color: '#ffffff'
                }
            },
            color: ['#5470c6'],
            tooltip: {
                trigger: 'item',
                renderMode: 'html',
                // 触发方式
                triggerOn: 'click',
                enterable: true,
                backgroundColor: '#fff',
                padding: 0,
                textStyle: {
                    color: '#000',
                    fontSize: '12'
                },
                extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
            },
            dispatchAction: {
                type: 'downplay'
            },
            roam: false,
            roamController: {
                show: true,
                x: 'right',
                mapTypeControl: {
                    china: true
                }
            },
            series: [
                {
                    name: '',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    color: ['#ff0000'],
                    symbolSize: 4,
                    tooltip: {
                        position: "right",
                        color: "#000000",
                        formatter(d) {
                            console.log(d)
                            return `<div style="padding: 5px 10px;">【${d.data.name}】</div>`;
                        },
                    },
                    data: res.data,
                }
            ],
            geo: {
                show: true,
                map: 'beijing',
                type: 'map',
                mapType: 'beijing',
                roam: false,
                label: {
                    normal: {
                        // 显示省份标签
                        show: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 10
                        }
                    },
                    emphasis: {
                        // 对应的鼠标悬浮效果
                        show: true,
                        // 选中后的字体样式
                        textStyle: {
                            color: '#000',
                            fontSize: 14
                        }
                    }
                },
                itemStyle: {
                    color: '#ddb926',
                    normal: {
                        areaColor: '#8abcd1',
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    emphasis: {
                        borderWidth: 0.5,
                        borderColor: '#8abcd1',
                        areaColor: '#fff'
                    }
                },
                emphasis: {
                    label: {
                        show: false
                    }
                }
            }
        }
        myChart.setOption(options)
    })
})
$.get('http://127.0.0.1:5000/word').then(res => {
    const myChart = echarts.init(document.getElementById('word'))
    const option = {
        title: {
            text: '景点介绍词频分析词云图',
            left: 'center',
            textStyle: {
                color: '#ffffff'
            }
        },
        tooltip: {},
        series: [{
            type: 'wordCloud',
            // shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
            shape: 'circle',
            // maskImage这个是可以自定义背景图片的，词云会按照图片的形状排布，所以有形状限制的时候，最好用背景图来实现，而且，这个背景图一定要放base64的，不然词云画不出来
            // maskImage: '',
            // 下面就是位置的配置
            left: 'center',
            top: 'center',
            width: '80%',
            height: '80%',
            right: null,
            bottom: null,
            // 词的大小，最小20px，最大60px，可以在这个范围调整词的大小
            sizeRange: [20, 60],
            // 每个词旋转的角度范围
            rotationRange: [-90, 90],
            rotationStep: 45,
            // 词间距，数值越小，间距越小，这里间距太小的话，会出现大词把小词套住的情况，比如一个大的口字，中间会有比较大的空隙，这时候他会把一些很小的字放在口字里面，这样的话，鼠标就无法选中里面的那个小字
            gridSize: 8,
            // 允许词太大的时候，超出画布的范围
            drawOutOfBound: false,
            // 布局的时候是否有动画
            layoutAnimation: true,
            // 这是全局的文字样式，相对应的还可以对每个词设置字体样式
            textStyle: {
                fontFamily: 'sans-serif',
                fontWeight: 'bold',
                // 颜色可以用一个函数来返回字符串
                color: function () {
                    // Random color
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                focus: 'self',
                textStyle: {
                    textShadowBlur: 10,
                    textShadowColor: '#333'
                }
            },

            // 数据必须是一个数组，数组是对象，对象必须有name和value属性
            data: res.data
        }]
    }
    myChart.setOption(option)
})

$.get('http://127.0.0.1:5000/funnel').then(res => {
    const myChart = echarts.init(document.getElementById('funnel'))
    const option = {
        color: ["#93aec1", "#f8b042", "#ec6a52", "#f3b7ad"],
        title: {
            text: '景区数量筛选漏斗图',
            left: 'center',
            textStyle: {
                color: '#ffffff'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'
        },
        series: [
            {
                name: '数量',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: res.max,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside',
                    color: '#ffffff'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },
                data: res.data
            }
        ]
    }
    myChart.setOption(option)
})
$.get('http://127.0.0.1:5000/sale_count').then(res => {
    const myChart = echarts.init(document.getElementById('sale_count'))
    const option = {
        color: ["#ec6a52"],
        title: {
            text: '景点售票数量排行TOP10',
            left: 'center',
            textStyle: {
                color: '#ffffff'
            }
        },
        grid: {
            left: '4%',
            right: '12%',
            bottom: '3%',
            containLabel: true,
        },
        xAxis: {
            name: '景点名称',
            type: 'category',
            data: res.label,
            axisLabel: {
                rotate: 45,
                interval: 0,
                color: '#ffffff'
            },
            nameTextStyle: {
                color: '#ffffff'
            }
        },
        yAxis: {
            name: '售票数量(票)',
            type: 'value',
            axisLabel: {
                color: '#ffffff'
            },
            nameTextStyle: {
                color: '#ffffff'
            }
        },
        series: [
            {
                data: res.value,
                type: 'bar'
            }
        ]
    }
    myChart.setOption(option)
})
$.get('http://127.0.0.1:5000/score').then(res => {
    const myChart = echarts.init(document.getElementById('score'))
    const option = {
        color: ["#f8b042"],
        title: {
            text: '景点评分排行TOP10',
            left: 'center',
            textStyle: {
                color: '#ffffff'
            }
        },
        grid: {
            left: '4%',
            right: '8%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            name: '评分',
            type: 'value',
            axisLabel: {
                color: '#ffffff'
            },
            nameTextStyle: {
                color: '#ffffff'
            }
        },
        yAxis: {
            name: '景点名称',
            type: 'category',
            data: res.label.reverse(),
            axisLabel: {
                color: '#ffffff'
            },
            nameTextStyle: {
                color: '#ffffff'
            }
        },
        series: [
            {
                data: res.value.reverse(),
                type: 'bar'
            }
        ]
    }
    myChart.setOption(option)
})
$.get('http://127.0.0.1:5000/pie').then(res => {
    const myChart = echarts.init(document.getElementById('pie'))
    const option = {
        color: ["#c34a5c", "#6B59CD", "#29425c", "#008081"],
        title: {
            text: '景点评级分布饼图',
            left: 'center',
            textStyle: {
                color: '#ffffff'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
            {
                name: '评级',
                type: 'pie',
                radius: '50%',
                data: res.data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    color: '#ffffff'
                }
            }
        ]
    }
    myChart.setOption(option)
})
